<template>
    <div 
    class="comment-block" 
    :class="layout"
    id="comment"
    >
        <client-only>
            <div class="main-input">
                <user-input
                    :objecttype="objecttype"
                    :objectguid="objectguid"
                    @submit="submitHandler"
                ></user-input>
            </div>
        </client-only>

        <div class="total" v-if="layout === 'page'">
            全部评论
            <span class="total-num">
                {{total}}
            </span>
        </div>

        <div class="list">
            <empty-list v-if="!data.length">
                暂无评论
            </empty-list>

            <comment-item
                v-for="(item, index) in tableData"
                :key="index"
                :data="item"
                :objectguid="objectguid"
                @update="submitHandler"
            ></comment-item>

            <btn-load
                :remain="remain"
                @click="btnLoadHandler"
            ></btn-load>
        </div>
    </div>
</template>

<script>
import UserInput from './components/input';
import CommentItem from './components/item';
import EmptyList from '../empty-list/index';

import LIST_MIXINS from './mixins/list';

export default {
    mixins: [LIST_MIXINS],
    components: {
        UserInput,
        CommentItem,
        EmptyList,
    },
    props: {
        layout: {
            type: String,
            default: 'page',
        },
        objecttype: {
            type: String,
            default: ''
        },
        objectguid: {
            type: String,
            default: ''
        },
        defaultShowSize: {
            type: Number,
            default: 10,
        },
    },
    provide() {
        return {
            objecttype: this.objecttype,
            objectguid: this.objectguid,
        };
    },
    data() {
        return {
            data: [],
        };
    },
    computed: {
        total() {
            return this.data.length;
        },
    },
    methods: {
        submitHandler(data) {
            this.queryData();
        },
        queryData() {
            this.$get(`${this.$store.state.api.tbUrl}/comment/listall.json`, {
                objectguid: this.objectguid,
                objecttype: this.objecttype,
            }, data => {
                this.data = data;
            });
        },
    },
    mounted() {
        this.queryData();
    },
}
</script>

<style lang="scss" scoped>
    .comment-block{
        &.page {
            .main-input{
                padding-bottom: 24px;
                border-bottom: 1px solid #f0f0f0;
            }

            .total{
                line-height: 1em;
                color: #333333;

                .total-num{
                    color: #999999;
                    margin-left: 8px;
                }

                padding-top: 24px;
            }
        }

        &.inline {

        }

        .list{
            margin-top: 24px;
        }
    }
</style>